<template>
	<view class="">
		<!-- <u-navbar title="我的课程"></u-navbar> -->
		<!-- 切换 -->
		<u-tabs :list="list" active-color="#FA541C" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 列表 -->
		<view class="" style="padding: 30rpx;">
			<view v-for="(item, index) in courseList" :key="item.id">
				<u-swipe-action :show="item.show" :index="index"
					@click="click" @content-click="goDetail(item)" @open="open" :options="options">
					<view class="u-flex u-m-t-24" style="width: 750rpx;">
						<view class="">
							<view>
								<image class="cimg"
									:src="'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/' + item.picture" mode="">
								</image>
							</view>
						</view>
						<view class="u-m-l-20 u-col" style="height: 130rpx;" @click="jumpCourse(item.lessonId)">
							<view class="u-font-28 u-col-top">{{item.lessonName}}</view>
							<view class="u-font-22 u-col-bottom u-m-t-50">当前进度： <text style="color: #FA541C;">10%</text>
							</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
			
			<!-- <view class="u-flex">
				<view class="">
					<view><image class="cimg" src="../../mycenter/myicon/tx.png" mode=""></image></view>
				</view>
				<view class="u-m-l-20 u-col" style="height: 130rpx;">
					<view class="u-font-28 u-col-top">美丽管家上岗培训</view>
					<view class="u-font-22 u-col-bottom u-m-t-50">当前进度： <text style="color: #FA541C;">10%</text> </view>
				</view>
			</view> -->
			<!-- <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in courseList" :key="item.id"
				@click="click" @open="open" :options="options">
				<view class="u-flex u-m-t-24" style="width: 750rpx;">
					<view class="">
						<view>
							<image class="cimg"
								:src="'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/' + item.picture" mode="">
							</image>
						</view>
					</view>
					<view class="u-m-l-20 u-col" style="height: 130rpx;">
						<view class="u-font-28 u-col-top">{{item.lessonName}}</view>
						<view class="u-font-22 u-col-bottom u-m-t-50">当前进度： <text style="color: #FA541C;">10%</text>
						</view>
					</view>
				</view>
			</u-swipe-action> -->
		</view>
	</view>
</template>

<script>
	import tuiCourse from '../../../components/tui-course/tui-source.vue';
	export default {
		components: {
			tuiCourse
		},
		data() {
			return {

				disabled: false,
				btnWidth: 180,
				show: false,
				options: [

					{
						text: '删除',
						style: {
							backgroundColor: '#FA541C'
						}
					}
				],



				list: [{
					name: '全部'
				}, {
					name: '未完成'
				}, {
					name: '已完成',
				}],
				current: 0,
				courseList: []
			}
		},
		onLoad() {
			this.initCourseList()
			//var player = new prismplayer({id:"J_prismPlayer",autoplay:false,width:"100%",vid:"${vid}",playauth:"${playAuth}",});

		},
		methods: {
			jumpCourse(lessonId) {
				console.log(lessonId)
				uni.navigateTo({
					// url: '../../pages/course/detail/detail?id='+lessonId
					url:'../detail/detail?id='+lessonId
				})
			},
			click(index, index1) {
				// this.$u.toast(`删除了第${index}个cell`);
				console.log(this.courseList[index].lessonId)
				this.removeMySubscribe(this.courseList[index].lessonId)
				this.courseList.splice(index, 1);
				// if(index1 == 1) {
				// 	this.list.splice(index, 1);
				// 	this.$u.toast(`删除了第${index}个cell`);
				// } else {
				// 	this.list[index].show = false;
				// 	this.$u.toast(`收藏成功`);
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.courseList[index].show = true;
				this.courseList.map((val, idx) => {
					if (index != idx) this.courseList[idx].show = false;
				})
			},

			change(index) {
				this.current = index;
				console.log(index)
				let statusNum = '';
				if (index > 0) {
					statusNum = index - 1;
				} else {
					statusNum = '';
				}
				console.log('statusNum', statusNum)
				this.initCourseList(statusNum)
			},
			initCourseList(statusNum) {
				this.$http.getMySubscribeLesson({
					status: statusNum
				}).then(res => {
					this.courseList = res.data
					console.log(res);
				})
			},
			removeMySubscribe(id){
				this.$http.removeMySubscribe(
					id
				).then(res => {
					console.log(res);
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: '../../pages/course/detail/detail?id='+item.lessonId
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 210rpx;
		flex: 0 0 130rpx;
		height: 130rpx;
		margin-right: 20rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}

	page {
		background: #FFFFFF;
	}

	.cimg {
		width: 210rpx;
		height: 130rpx;
	}

	.top-box {
		background: #FFFFFF;
		position: sticky;
		top: calc(44px + var(--status-bar-height));
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
